<template>
  <div>
    <div class="sendMail mailHead">
      <div style="display: flex">
        <div style="min-width: 150px;margin-right: 20px">接收人姓名</div>
        <div style="min-width: 230px">接收人邮箱</div>
      </div>
      <div style="text-align: right">
        <el-button type="text" @click="addMail">添加</el-button>
      </div>
    </div>

    <div class="sendMail" v-for="(item,index) of mailData" :key="item.id">
      <div style="display: flex">
        <el-input
            v-model="item.linkman"
            style="min-width: 150px;margin-right: 20px"
            placeholder="请输入接收人姓名"
        />
        <el-input
            v-model="item.email"
            style="min-width: 230px"
            placeholder="请输入接收人邮箱"
        />
      </div>
      <div style="display: flex">
        <el-button type="text" @click="saveMail(item)" style="margin-left: 20px">保存</el-button>
        <el-popconfirm
            title="确定要删除当前的邮箱？"
            @confirm="delMail(item,index)"
        >
          <el-button slot="reference" style="color: red;margin-left: 10px" type="text">删除</el-button>
        </el-popconfirm>
      </div>
    </div>
  </div>
</template>

<script>
  import {addEmail, deleteEmail, getEmailList} from "@/api/service"

  let num = 0;
  export default {
    name: "",
    data() {
      return {
        mailData: [
          {email: '', linkman: '', id: num},
        ]
      }
    },
    created() {
      this.getEmailList()
    },
    methods: {
      async getEmailList() {
        let result = await getEmailList();
        this.handleResult(result, () => {
          this.mailData = result.data;
        })
      },
      addMail() {
        this.mailData.push({linkman: '', email: '', id: num++})
      },
      async saveMail(row) {
        const {linkman, email} = row;
        if (!linkman) {
          this.$message({
            message: '请填写邮箱姓名',
            type: 'warning'
          })
          return
        }
        if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(email)) {
          this.$message({
            message: '邮箱格式不正确',
            type: 'warning'
          })
          return
        }
        let result = await addEmail({
          linkman,
          email
        })
        this.handleResult(result, () => {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        })
      },
      async delMail(row, index) {
        let params = {
          ids: [row.id]
        }
        const result = await deleteEmail(params);
        this.handleResult(result, () => {
          this.mailData.splice(index, 1)
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .sendMail {
    width: 80%;
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
  }

  .mailHead {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    padding-bottom: 15px;
    border-bottom: 1px solid #CBCBCB;
  }
</style>